<template>
	<div>
		<el-dialog
			:title="titles"
			:visible.sync="visible"
			width="1200px"
			@closed="onCancel"
			destroy-on-close>
			<div v-loading="loading">
				<div class="checkList" v-if="typeList && typeList.length > 1">
					<div
						class="item"
						v-for="(item, index) in typeList"
						:class="[activeChecked == item.value ? 'active' : '']"
						@click="checkType(item, index)">
						{{ item.label }}
					</div>
				</div>

				<SearchForm
					@reset="reset"
					@search="search"
					ref="search"
					gap="10px 0">
					<FormItem
						v-for="item in SearchFormItems"
						:key="item.label"
						v-model="queryParams"
						:FormItem="item"
						@FormItem="val => (item = val)"></FormItem>
					<!-- :formData="queryParams" -->
				</SearchForm>

				<div class="tablePage" :key="activeType">
					<table-page
						ref="table"
						:dataList="datalist"
						:total="total"
						:page.sync="queryParams.pageNum"
						:limit.sync="queryParams.pageSize"
						:border="true"
						@setSizeCurrent="pageConfigChange"
						:isSelect="selection"
						@selectionChange="selectionChange"
						:config="{
							style: {
								minHeight: '410px',
							},
						}">
						<!-- 操作插槽 -->
						<template slot="tableColAc">
							<el-table-column
								label="序号"
								align="center"
								type="index"
								width="80">
								<template slot-scope="scope">
									<span v-if="index(scope.$index) <= 99999">
										{{ index(scope.$index) }}
									</span>
									<span v-else>
										<el-tooltip
											class="item"
											effect="dark"
											:content="index(scope.$index)"
											placement="top">
											<span>...</span>
										</el-tooltip>
									</span>
								</template>
							</el-table-column>
							<TableColumn
								v-for="item in tableItem"
								:cellOptions="item"></TableColumn>
							<!-- <el-table-column -->
							<!-- v-for="item in tableItem" -->
							<!-- :label="item.label" -->
							<!-- align="center" -->
							<!-- > -->
							<!-- <template slot-scope="scope"> -->
							<!-- <div> -->
							<!-- {{ scope.row[item.prop] }} -->
							<!-- </div> -->
							<!-- </template> -->
							<!-- </el-table-column> -->
							<!--  -->
							<el-table-column
								align="center"
								label="操作"
								width="150">
								<template slot-scope="scope">
									<div>
										<el-button
											v-if="type !== 'Tips'"
											type="text"
											@click="onSelect(scope.row)">
											选择
										</el-button>
									</div>
								</template>
							</el-table-column>
						</template>
					</table-page>
				</div>
			</div>
			<div class="handleBox" slot="footer" v-if="selection">
				<el-button type="" size="mini" @click="handle_no">
					{{ toastFailBtn }}
				</el-button>
				<el-button type="primary" size="mini" @click="handle_sure">
					{{ toastSureBtn }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import * as apis from '@/api/finance/reimburs/template/api.js';
	import FormItem from '../formItem/index.vue';
	import TableColumn from '@/views/finance/manage/tableColumn/index.vue';
	import {
		getQueryModelByIdList,
		getSeriesName,
		getModelName,
		getBrandName,
		addModelCar,
		getModelCar,
		deleteCar,
	} from '@/api/globalField';
	export default {
		inheritAttrs: false,
		components: { FormItem, TableColumn },
		data() {
			return {
				title: '',
				type: '',
				typeList: [],
				params: {},
				visible: false,
				loading: true,
				total: 0,
				datalist: [],
				activeChecked: 0,
				activeType: '',
				SearchFormItems: [],
				tableItem: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				selectArr: [],
				selection: false,
				toastSureBtn: '',
				toastFailBtn: '',
				checkTypeList: [],
				brandList: [],
				seriesList: [],
				modelList: [],

				dicts: { customer_level: [], car_type: [] },
			};
		},
		computed: {
			titles() {
				let word = this.typeList?.reduce((prev, next) => {
					return `${prev}${prev ? '/' : ''}${next.label}`;
				}, '');
				return this.title || `请选择${word}`;
			},
		},
		created() {
			this.init();
		},
		mounted() {},

		methods: {
			pageConfigChange() {
				this.getList();
			},
			index(index) {
				let num =
					(this.queryParams.pageNum - 1) * this.queryParams.pageSize +
					index +
					1;
				return num?.toString();
			},
			selectionChange(val) {
				this.selectArr = val;
			},
			init() {
				this.inteCheckOptions();
				this.initTypeList();
				this.initTableCloumn();
				this.getList();
			},
			inteCheckOptions() {
				this.checkTypeList = [
					{ label: '订单', type: 'Order' },
					{ label: '车辆', type: 'Car' },
					{ label: '车辆', type: 'QuotaCar' },
					{ label: '车型', type: 'QuotaCarType' },
					{ label: '用户', type: 'User' },
					{ label: '用户', type: 'UserNo' },
					{ label: '订单', type: 'FinanceOrder' },
					{ label: '车辆', type: 'FinanceCar' },
				];
				this.checkTypeList.forEach((item, index) => {
					item.value = index;
				});
			},
			initTypeList() {
				let menus = [],
					types = [];
				if (typeof this.type == 'string') {
					types = this.type.split(',');
				}
				types?.map(item => {
					if (item !== '') {
						let e = this.checkTypeList?.find(
							c =>
								item?.toLocaleLowerCase() ==
								c?.type?.toLocaleLowerCase(),
						);
						if (e) {
							menus.push(e);
						} else {
							console.error(`未配置${item}列表`);
						}
					}
				});
				this.activeChecked = menus?.[0]?.value;
				this.activeType = menus?.[0]?.type;
				this.typeList = menus;
			},
			indexMethod(index) {
				return (
					(this.queryParams.pageNum - 1) * this.queryParams.pageSize +
					index +
					1
				);
			},
			checkType(row, index) {
				if (this.activeChecked !== row.value) {
					this.activeChecked = row.value;
					this.activeType = row.type;
					this.initQueryParams();
					this.initSelectState();
					this.initTableCloumn();
					this.getList();
				}
			},
			initSelectState() {
				this.selectArr = [];
				this.$refs.table?.table_clearSelection();
			},
			initQueryParams() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				};
			},
			async initTableCloumn() {
				this.initQueryParams();
				let type = this.activeType;
				switch (type?.toLocaleLowerCase()) {
					// 选择订单
					case 'order':
					case 'financeorder':
						this.getOrderQueryForm();
						this.getOrderTableCloumn();
						break;
					case 'car':
					case 'financecar':
						this.getCarQueryForm();
						this.getCarTableCloumn();
						break;
					case 'quotacar':
						this.getQuotaCarQueryForm();
						this.getQuotaCarTableCloumn();
						break;
					case 'quotacartype':
						this.getName();
						this.getQuotaCarTypeQueryForm();
						this.getQuotaCarTypeTableCloumn();
						break;
					case 'company':
						this.getCompanyQueryForm();
						this.getCompanyTableCloumn();
						break;
					case 'user':
						await this.getUserQueryForm();
						this.getUserTableCloumn();
						break;
					case 'userno':
						await this.getUserQueryForm();
						this.getUserTableCloumn();
						break;
					case 'Tips':
					default:
						() => {};
				}
				// this.$refs?.search?.resize?.();
			},

			getList() {
				this.loading = true;
				let type = this.activeType;
				return new Promise(async res => {
					let data = this.params[`_${type}`];

					let params = Object.assign(
						{},
						this.queryParams,
						data ?? this.params,
					);
					switch (type?.toLocaleLowerCase?.()) {
						// HealthManage
						case 'order':
							await this.getOrderList(params);
							break;
						case 'car':
							await this.getCarList(params);
							break;
						case 'quotacar':
							await this.getQuotaCarList(params);
							break;
						case 'quotacartype':
							await this.getQuotaCarTypeList(params);
							break;
						case 'company':
							await this.getCompanyList(params);
							break;
						case 'user':
							await this.getUserList(params);
							break;
						case 'userno':
							await this.getUserNoList(params);
							break;
						case 'financeorder':
							await this.getFinanceOrderList(params);
							break;
						case 'financecar':
							await this.getFinanceCarList(params);
							break;
						default:
							() => {};
					}
					this.loading = false;
					res();
				});
			},
			// 获取车辆
			getCarQueryForm() {
				// 初始化搜索条件
				this.SearchFormItems = [
					{
						label: '车牌号:',
						prop: 'carNo',
						type: 'input',
					},
					{
						label: '车架号:',
						prop: 'vinNo',
						type: 'input',
					},
				];
			},
			async getCarTableCloumn() {
				let list = await this._getDicts('car_type');
				this.$set(this.dicts, 'car_type', list);
				// 初始化表格列
				this.tableItem = [
					{
						label: '车型',
						prop: 'modelName',
					},
					{
						label: '车牌号',
						prop: 'carNo',
					},
					{
						label: '车架号',
						prop: 'vinNo',
					},
					{
						label: '客户',
						prop: 'customerName',
					},
					{
						label: '车辆类型',
						prop: 'carType',
						type: 'select',
						selectList: this.dicts.car_type,
						state: 'readonly',
					},
					{
						label: '登记类型',
						format: row => {
							let word = '';
							switch (row.carNature) {
								case '1':
									word = '营运';
									break;
								case '2':
									word = '非营运';
									break;
								default:
									break;
							}
							return word;
						},
					},
					{
						label: '所属公司',
						prop: 'ascription',
					},
				];
			},
			getCarList(params) {
				return new Promise(resolve => {
					apis.CarList(params)
						.then(res => {
							if (res.code == 200) {
								this.datalist = res.rows ?? [];
								this.total = res.total;
							}
						})
						.finally(res => {
							resolve();
						});
				});
				// 获取表格数据

				// healthManage_template(this.queryParams)
				//     .then((res) => {

				//     })
				//     .finally(() => {
				//         this.loading = false;
				//     });
			},

			// 获取订单
			getOrderQueryForm() {
				// 初始化搜索条件
				this.SearchFormItems = [
					{
						label: '订单编号:',
						prop: 'orderCarCode',
						type: 'input',
					},
					{
						label: '车牌号:',
						prop: 'carPlateNo',
						type: 'input',
					},
					{
						label: '车架号:',
						prop: 'carVinNo',
						type: 'input',
					},
					{
						label: '采购编号:',
						prop: 'd',
						type: 'input',
					},
				];
			},
			getOrderTableCloumn() {
				// 初始化表格列
				this.tableItem = [
					{
						label: '订单编号',
						prop: 'orderCarCode',
					},
					{
						label: '采购编号',
						prop: 'sex',
					},
					{
						label: '车牌号',
						prop: 'carPlateNo',
					},
					{
						label: '客户',
						prop: 'leaseeName',
					},
					{
						label: '车架号',
						prop: 'carVinNo',
					},
					{
						label: '车型',
						prop: 'carModelName',
					},
					{
						label: '所属公司',
						prop: 'lessorName',
					},
				];
			},
			getOrderList(params) {
				return new Promise(resolve => {
					apis.OrderList(params)
						.then(res => {
							if (res.code == 200) {
								this.datalist = res.rows ?? [];
								this.total = res.total;
							}
						})
						.finally(res => {
							resolve();
						});
				});
			},
			// 获取公司
			getCompanyQueryForm() {},
			getCompanyTableCloumn() {
				this.tableItem = [
					{
						label: '姓名',
						prop: 'name',
					},
					{
						label: '性别',
						prop: 'sex',
					},
					{
						label: '年龄',
						prop: 'age',
					},
					{
						label: '电话',
						prop: 'phone',
					},
					{
						label: '住址',
						prop: 'address',
					},
				];
			},
			getCompanyList(params) {
				return new Promise(resolve => {
					apis?.CompanyList(params)
						.then(res => {
							if (res.code == 200) {
								this.datalist = res.rows ?? [];
								this.total = res.total;
							}
						})
						.finally(() => {
							resolve();
						});
				});
			},
			// 额度车辆
			getQuotaCarQueryForm() {},
			getQuotaCarTableCloumn() {
				this.tableItem = [
					{
						label: '姓名',
						prop: 'name',
					},
					{
						label: '性别',
						prop: 'sex',
					},
					{
						label: '年龄',
						prop: 'age',
					},
					{
						label: '电话',
						prop: 'phone',
					},
					{
						label: '住址',
						prop: 'address',
					},
				];
			},

			getQuotaCarList(params) {
				return new Promise(resolve => {
					apis.QuotaCarList(params)
						.then(res => {
							if (res.code == 200) {
								this.datalist = res.rows ?? [];
								this.total = res.total;
							}
						})
						.finally(res => {
							resolve();
						});
				});
			},
			getName() {
				getBrandName([]).then(res => {
					this.brandList = res;
					this.getQuotaCarTypeQueryForm();
				});
			},
			getSeriesName() {
				if (this.queryParams.brandIds.length > 0) {
					getSeriesName(this.queryParams.brandIds).then(res => {
						this.seriesList = res;
						this.getQuotaCarTypeQueryForm();
					});
				} else {
					this.queryParams.seriesIds = [];
					this.queryParams.modelIds = [];
					this.modelList = [];
					this.seriesList = [];
				}
			},
			getModelName() {
				if (this.queryParams.seriesIds.length > 0) {
					getModelName(this.queryParams.seriesIds).then(res => {
						this.modelList = res;
						this.getQuotaCarTypeQueryForm();
					});
				} else {
					this.queryParams.modelIds = [];
					this.modelList = [];
				}
			},
			// 额度车型
			getQuotaCarTypeQueryForm() {
				this.SearchFormItems = [
					{
						label: '品牌:',
						prop: 'brandIds',
						type: 'select',
						selectList: this.brandList,
						selectLabel: 'name',
						selectValue: 'id',
						prototype: {
							multiple: true,
							collapseTags: true,
						},
						event: {
							type: 'change',
							cb: row => {
								if (this.notEmpty(row.brandIds)) {
									this.getSeriesName();
								} else {
									this.queryParams.seriesIds = undefined;
									this.seriesList = [];
									this.queryParams.modelIds = undefined;
									this.modelList = [];
								}
							},
						},
					},
					{
						label: '车系:',
						prop: 'seriesIds',
						type: 'select',
						selectList: this.seriesList,
						selectLabel: 'name',
						selectValue: 'id',
						prototype: {
							multiple: true,
							collapseTags: true,
						},
						event: {
							type: 'change',
							cb: row => {
								if (this.notEmpty(row.seriesIds)) {
									this.getModelName();
								} else {
									this.queryParams.modelIds = undefined;
									this.modelList = [];
								}
							},
						},
					},
					{
						label: '车型:',
						prop: 'modelIds',
						type: 'select',
						selectList: this.modelList,
						selectLabel: 'name',
						selectValue: 'id',
						prototype: {
							multiple: true,
							collapseTags: true,
						},
					},
				];
			},
			getQuotaCarTypeTableCloumn() {
				this.tableItem = [
					{
						label: '品牌',
						prop: 'brandName',
					},
					{
						label: '车系',
						prop: 'seriesName',
					},
					{
						label: '车型',
						prop: 'modelName',
					},
					{
						label: '厂商',
						prop: 'makerName',
					},
				];
			},
			getQuotaCarTypeList(params) {
				return new Promise(resolve => {
					apis.QuotaCarTypeList(params)
						.then(res => {
							if (res.code == 200) {
								this.datalist = res.rows ?? [];
								this.total = res.total;
							}
						})
						.finally(res => {
							resolve();
						});
				});
			},

			// 用户
			getUserQueryForm() {
				return new Promise(async resolve => {
					let list = await this._getDicts('customer_level');
					this.$set(this.dicts, 'customer_level', list);

					this.SearchFormItems = [
						{
							label: '名称:',
							prop: 'customerName',
							type: 'input',
							placeholder: '请输入名称',
						},
						{
							label: '客户等级:',
							prop: 'customerLevelCode',
							type: 'select',
							selectLabel: 'dictLabel',
							selectValue: 'dictValue',
							selectList: this.dicts.customer_level,
						},
					];
					resolve();
				});
			},
			getUserTableCloumn() {
				this.tableItem = [
					{
						label: '名称',
						prop: 'customerName',
					},
					{
						label: '联系方式',
						prop: 'customerPhone',
					},
					{
						label: '客户标签',
						prop: 'customerLabel',
					},
					{
						label: '客户等级',
						prop: 'customerLevel',
						format: row => {
							let item = this.dicts.customer_level?.find(
								e => e.dictValue == row.customerLevelCode,
							);
							if (item) {
								return item.dictLabel;
							}
						},
					},
				];
			},
			getUserList(params) {
				return new Promise(resolve => {
					apis.UserList(params)
						.then(res => {
							if (res.code == 200) {
								this.datalist = res.rows ?? [];
								this.total = res.total;
							}
						})
						.finally(res => {
							resolve();
						});
				});
			},
			getUserNoList(params) {
				return new Promise(resolve => {
					apis.UserNoList(params)
						.then(res => {
							if (res.code == 200) {
								this.datalist = res.rows ?? [];
								this.total = res.total;
							}
						})
						.finally(res => {
							resolve();
						});
				});
			},
			getFinanceOrderList(params) {
				return new Promise(resolve => {
					apis.FinanceOrderList(params)
						.then(res => {
							if (res.code == 200) {
								this.datalist = res.rows ?? [];
								this.total = res.total;
							}
						})
						.finally(res => {
							resolve();
						});
				});
			},
			getFinanceCarList(params) {
				return new Promise(resolve => {
					apis.FinanceCarList(params)
						.then(res => {
							if (res.code == 200) {
								this.datalist = res.rows ?? [];
								this.total = res.total;
							}
						})
						.finally(res => {
							resolve();
						});
				});
			},
			getDicts(user) {},
			reset() {
				this.initQueryParams();
				this.search();
			},
			search() {
				this.getList();
			},
			handle_sure() {
				if (this.selectArr?.length == 0) {
					this.Cancel();
					return;
				}
				this.Select(this.selectArr, this.activeType);
			},
			handle_no() {
				this.Cancel();
			},
			onCancel() {
				this.Cancel();
			},
			onSelect(res) {
				this.Select(res, this.activeType);
			},

			Select() {},
			Cancel() {},
		},
	};
</script>
<style lang="scss" scoped>
	>>> .el-drawer__body {
		min-height: 0;
	}

	.tablePage {
		// padding: 15px;
		padding-top: 15px;
	}
	.checkList {
		display: flex;
		gap: 0 15px;
		.item {
			padding: 7px 12px;
			border: 1px solid #8c8c8c;
			border-radius: 5px;
			cursor: pointer;
			font-size: 14px;
		}
		.active {
			color: #fff;
			background: #1890ff;
			border-color: #1890ff;
		}
	}
	.handleBox {
		display: flex;
		justify-content: flex-end;
	}
	::v-deep .el-dialog {
		display: flex;
		flex-direction: column;
		margin: 0 !important;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-height: calc(100% - 30px);
		max-width: calc(100% - 30px);
	}
	::v-deep .el-dialog .el-dialog__body {
		flex: 1;
		overflow: auto;
	}
</style>
